<template>
  <section class="search_wrapper">
    <van-nav-bar left-arrow fixed @click-left="onClickLeft">
      <template #right>
        <span @click="onSearch">搜索</span>
      </template>
      <template #title>
        <van-search c v-model="value" placeholder="请输入搜索关键词">
        </van-search>
      </template>
    </van-nav-bar>
    <div class="content">
      <!-- history -->
      <div
        class="history_search"
        v-if="customeSearchClass.controller.showHistorySearch"
      >
        <div class="head font-14">
          <span> 浏览历史 </span>
          <span @click="handleDelete">
            <van-icon name="delete-o" />
          </span>
        </div>
        <div class="tags font-12">
          <span>
            <i> 洗面奶0 </i>
          </span>
          <span>
            <i> 洗面奶0 </i>
          </span>
          <span>
            <i> 洗面奶0 </i>
          </span>
          <span>
            <i> 洗面奶0 </i>
          </span>
          <span>
            <i> 洗面奶1 </i>
          </span>
          <span>
            <i> 洗面奶2 </i>
          </span>
        </div>
      </div>
      <!-- hot -->
      <div
        class="hot_search"
        v-if="customeSearchClass.controller.showHotSearch"
      >
        <div class="head font-14">
          <span> 热门搜索 </span>
          <span> 隐藏 </span>
        </div>
        <div class="tags font-12">
          <span>
            <i> 洗面奶0 </i>
          </span>
          <span>
            <i> 洗面奶1 </i>
          </span>
          <span>
            <i> 洗面奶2 </i>
          </span>
        </div>
      </div>

      <div class="list">
        <div
          v-for="item in customeSearchClass.controller.searchLists"
          :key="item.name"
        >
          {{ item.name }}
        </div>

        <van-tabs
          v-model:active="active"
          swipeable
          class="customer-tabs"
          sticky
          offset-top="46"
        >
          <van-tab
            v-for="(item, index) in tabsList"
            :title="`${item.name}`"
            :key="index"
          >
            <!-- empty -->
            <van-empty
              description="没有更多..."
              v-if="item.lists.length == 0"
            />
            <!-- list  -->
            <van-pull-refresh
              v-if="item.lists.length > 0"
              v-model="refreshing"
              @refresh="onRefresh"
            >
              <van-list
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
              >
                <van-card
                  :num="item.num"
                  :price="item.price"
                  :desc="item.desc"
                  :title="item.title"
                  :thumb="item.thumb"
                  v-for="item in list"
                  :key="item.num"
                  @click="handleGoToDetail(item)"
                >
                  <template #tags>
                    <van-tag plain type="danger">标签</van-tag>
                  </template>
                  <template #footer>
                    <van-button size="mini">加入购物车</van-button>
                  </template>
                </van-card>
              </van-list>
            </van-pull-refresh>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </section>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
import { useRouter } from "vue-router";
import searchClass, { IGoods } from "@/utils/search.class";
export default defineComponent({
  setup() {
    const router = useRouter();
    const value = ref("");
    const onSearch = () => {};
    const onClickLeft = () => {
      router.go(-1);
    };
    const customeSearchClass = reactive({
      controller: searchClass,
    });
    const handleDelete = () => {
      (customeSearchClass.controller as any).setHotSearchStatus(false);

      const _list: Array<IGoods> = [
        {
          name: "123",
          pice: 123,
          cc: 0,
        },
        {
          name: "1234",
          pice: 1234,
        },
      ];

      (customeSearchClass.controller as any).setSearchLists(_list);

      console.log(customeSearchClass.controller);
      // (customeSearchClass.controller as any).showHotSearch = false;
    };

    const active = ref(0);
    const list = ref([]);
    const tabsList = reactive([
      {
        name: "商品列表",
        lists: [
          {
            name: "你好",
          },
        ],
      },
      {
        name: "促销活动",
        lists: [],
      },
    ]);
    const loading = ref(false);
    const finished = ref(false);
    const refreshing = ref(false);
    const onLoad = () => {
      setTimeout(() => {
        if (refreshing.value) {
          list.value = [];
          refreshing.value = false;
        }

        for (let i = 0; i < 10; i++) {
          (list.value as any[]).push({
            num: "2",
            price: "2",
            desc: "描述信息",
            title: "商品标题",
            thumb: "https://img.yzcdn.cn/vant/ipad.jpeg",
          });
        }
        loading.value = false;

        if (list.value.length >= 20) {
          finished.value = true;
        }
      }, 1000);
    };
    const onRefresh = () => {
      // 清空列表数据
      finished.value = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true;
      onLoad();
    };

    return {
      value,
      onSearch,
      onClickLeft,
      customeSearchClass,
      handleDelete,

      active,
      list,
      tabsList,
      loading,
      finished,
      refreshing,
      onRefresh,
      onLoad,
    };
  },
});
</script>

<style lang="scss" scoped>
.search_wrapper {
  padding-top: 46px;
  /deep/.van-nav-bar__title {
    width: 280px;
    max-width: none;
  }
  .hot_search,
  .history_search {
    padding: 0 10px;
    .head {
      height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .tags {
      span {
        padding-right: 10px;
        padding-bottom: 10px;
        i {
          height: 23px;
          line-height: 24px;
          border-radius: 3px;
          color: #686868;
          background-color: #f0f2f5;
          padding-left: 13px;
          padding-right: 13px;
          font-style: normal;
        }
      }
    }
  }
  .content {
    height: calc(100vh - 46px);
    overflow-y: auto;
  }
}
</style>
